<template>
  <div>
    <el-main>
      <div class="top">
        <el-button type="button" @click="$router.push('/index/house/number')">返回</el-button>
      </div>

      <div class="content">
        <el-form :model="numForm" ref="numForm" label-width="120px">
          <div class="title">房号信息</div>
          <div class="form">
            <el-form-item prop="communityname" label="单元名称">
              <el-input v-model="numForm.communityname" readonly></el-input>
            </el-form-item>
            <el-form-item prop="buildnum" label="幢号">
              <el-input v-model="numForm.buildnum" placeholder="请输入幢号"></el-input>
            </el-form-item>
            <el-form-item prop="storeynum" label="楼层号">
              <el-input v-model="numForm.storeynum" placeholder="请输入楼层号"></el-input>
            </el-form-item>
            <el-form-item prop="homenum" label="房号">
              <el-input v-model="numForm.homenum" placeholder="请输入房号"></el-input>
            </el-form-item>
            <el-form-item prop="homename" label="住客姓名">
              <el-input v-model="numForm.homename" placeholder="请输入住客姓名"></el-input>
            </el-form-item>
            <el-form-item prop="unitstatus" label="状态">
              <el-select v-model="numForm.unitstatus" placeholder="选择状态" style="width: 200px;">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-col el-col-24>
              <el-form-item label="房屋信息">
                <el-input type="textarea" v-model="numForm.homemessage" placeholder="请输入房屋信息"></el-input>
              </el-form-item>
            </el-col>
            <el-col el-col-24>
              <el-form-item label="家庭成员">
                <el-input type="textarea" v-model="numForm.homesuggestion" placeholder="请输入家庭成员"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="title">智能设备</div>
          <div class="form">
            <el-form-item label="洗衣机数量">
              <el-input v-model="numForm.washnum" placeholder="请输入洗衣机数量"></el-input>
            </el-form-item>
            <el-form-item label="WI-FI名称">
              <el-input v-model="numForm.wifiname" placeholder="请输入WI-FI名称"></el-input>
            </el-form-item>
            <el-form-item label="空调数量">
              <el-input v-model="numForm.airnum" placeholder="请输入空调数量"></el-input>
            </el-form-item>
            <el-form-item label="智能设备状态">
              <el-select v-model="numForm.smartstatus" placeholder="选择状态" style="width: 200px;">
                <el-option v-for="item in smartOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="title">家居设备</div>
          <div class="form">
            <el-form-item label="书桌数量">
              <el-input v-model="numForm.homedesk" placeholder="请输入书桌数量"></el-input>
            </el-form-item>
            <el-form-item label="椅子数量">
              <el-input v-model="numForm.homechair" placeholder="请输入椅子数量"></el-input>
            </el-form-item>
            <el-form-item label="衣橱数量">
              <el-input v-model="numForm.homeclothes" placeholder="请输入衣橱数量"></el-input>
            </el-form-item>
            <el-form-item label="家居设备状态">
              <el-select v-model="numForm.homestatus" placeholder="选择状态" style="width: 200px;">
                <el-option v-for="item in smartOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="submit" style="text-align: right;">
          <el-button type="success" @click="editNumber()"
            style="padding: 4px 15px; font-size: 12px; height: 30px; color: #fff;">保存</el-button>
          <el-button type="primary" @click="$router.push('/index/house/number')"
            style="padding: 4px 15px; font-size: 12px; height: 30px; color: #fff;">返回</el-button>
        </div>
      </div>
    </el-main>
  </div>

</template>
<script>
export default {
  data() {
    return {
      id: '',
      numList: {},
      numForm: {
        id: '',
        unitname: '',
        buildnum: '',
        storeynum: '',
        homenum: '',
        homename: '',
        homestatus: '',
        homemessage: '',
        homesuggestion: '',
        airnum: '',
        wifiname: '',
        washnum: '',
        smartstatus: '',
        homedesk: '',
        homechair: '',
        homeclothes: '',
        familystatus: '',
        h_id: '',
        homeaddress:'',
        token:sessionStorage.getItem('token')
      },
      statusOptions: [
        { value: '1', label: '未入住' },
        { value: '2', label: '已入住' },
      ],
      smartOptions: [
        { value: '1', label: '完好' },
        { value: '2', label: '待维修' },
      ],
    }
  },
  created() {
    this.id = this.$route.query.editId
  },
  mounted() {
    this.getDetails()
  },
  computed: {
    getStatusLabel() {
      return (unitstatus) => {
        const status = this.statusOptions.find(option => option.value == unitstatus);
        return status ? status.label : '未知状态';
      };
    },
    getSmartLabel() {
      return (smartstatus) => {
        const status = this.smartOptions.find(option => option.value == smartstatus);
        return status ? status.label : '未知状态';
      };
    },
    getHomeLabel() {
      return (homestatus) => {
        const status = this.smartOptions.find(option => option.value == homestatus);
        return status ? status.label : '未知状态';
      };
    },
    getStatusValue() {
      return (unitstatus) => {
        const status = this.statusOptions.find(option => option.label == unitstatus);
        return status ? status.value : '未知状态';
      };
    },
    getSmartValue() {
      return (smartstatus) => {
        const status = this.smartOptions.find(option => option.label == smartstatus);
        return status ? status.value : '未知状态';
      };
    },
    getHomeValue() {
      return (homestatus) => {
        const status = this.smartOptions.find(option => option.label == homestatus);
        return status ? status.value : '未知状态';
      };
    }
  },
  methods: {
    async getDetails() {
      const { data: res } = await this.axios.get('house/getDetailId', {
        params: {
          id: this.id,
          token: this.$store.state.token
        }
      })
      console.log(res[0]);
      const numList = res[0]
      this.numList = numList
      this.numForm = {
          ...numList,
        };
        this.numForm.unitstatus = this.getStatusLabel(numList.unitstatus)
        // this.numForm.smartstatus = this.getSmartLabel(numList.smartstatus)
        // this.numForm.homestatus = this.getHomeLabel(numList.homestatus)
      
    },
    async editNumber() {
      this.numForm.id = this.id
      this.numForm.h_id = this.id
      const { data: res } = await this.axios.post('house/updatenumList',this.numForm);
        console.log(res);
        this.$confirm('确认提交信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('修改成功')
          this.$router.push('/index/house/number')
        }).catch(() => {
          this.$message.info('已取消修改')
        })
    }
  }
}
</script>
<style scoped lang="scss">
.el-main {
  margin: 25px 0 0 6px;

  .el-button {
    color: #409EFF;
    padding: 0;
  }

  .el-form {
    margin-top: 20px;

    .title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
      margin-left: 5px;
    }

    .title:before {
      content: "";
      border-left: 5px solid #20a0ff;
      padding-right: 8px;
    }

    .form {
      width: 96%;
      margin-left: 20px;
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        width: 47%;
        margin-left: 3%;


      }
    }
  }
}
</style>